<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 16px
        }
        input{
            border: none;
            outline: none;
            border-bottom: 1px solid black;
        }


        .btn{
            width: 50px;
            height: 50px;
            background-color: #abb2b2;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            font-size: 1.2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;


        }

        .div-btn-group{
            width: 220px;
            display: flex;
            flex-wrap:wrap;
            justify-content: space-between;
        }





    </style>
</head>
<body>
  <div class="div-computer">
      <div class="div-row">
          <span>算式：</span>
          <input id="exp" name="exp" value="" type="text">
      </div>
      <div class="div-row">
          <span>结果：</span>
          <input id="result" name="result" value="" type="text">
      </div>
      <div class="div-btn-group">
          <div class="btn" style="flex: 0 0 auto">C</div>
          <div class="btn">CE</div>
          <div class="btn"></div>
          <div class="btn"></div>
          <div class="btn">
              1
          </div>
          <div class="btn">
              2
          </div>
          <div class="btn">
              3
          </div>
          <div class="btn">
              +
          </div>
          <div class="btn">
              4
          </div>
          <div class="btn">
              5
          </div>
          <div class="btn">
              6
          </div>
          <div class="btn">
              -
          </div>
          <div class="btn">
              7
          </div>
          <div class="btn">
              8
          </div>
          <div class="btn">
              9
          </div>
          <div class="btn">
              *
          </div>
          <div class="btn">
              /
          </div>
          <div class="btn">
              0
          </div>
          <div class="btn">
              .
          </div>
          <div class="btn">
              =
          </div>
      </div>
  </div>
</body>
</html>
<script>
    var btns ='';
    var exp_input = document.getElementById("exp")
    var result_input = document.getElementById("result")
    var exp ="";
    window.onload = function (){
        btns=document.getElementsByClassName('btn')
        for(let btn of btns){
            btn.onload = function (){
                console.log(this.innerHTML.trim());
                if(this.innerHTML.trim() ==="C"){
                    exp ="";
                    exp_input.value=exp;
                    result_input.value = v;
                }else if (this.innerHTML.trim() === "=") {
                  var v = eval(exp);
                  result_input.value = v;
                } else {
                    exp += this.innerHTML.trim()
                    exp_input.value =exp;
                }
            }
        }
        console.log(btns)
    }
</script>